<template>
  <div class="future-weather">
    <div>
      <h3>最后更新时间：{{updateTime}}</h3>
    </div>
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
import dayjs from 'dayjs';
import {KEY,API_24H} from "../common/constrant";
//引入mapstate函数
//import { mapState } from 'vuex'
export default {
  data(){
    return{
      hourly:[],
      hourWeatherData:{
        fxTime:[],//x轴数据
        temp:[],//series数据
      },
      updateTime:""
    };
  },
  //添加计算属性location，从状态管理中获取数据
  computed:{
    location:function(){
      return this.$store.state.location.id
    }
    // ...mapState([
    //   "location"
    // ])
  },
  methods: {
    //获取API数据
    getData() {
      axios.get(API_24H, {
          params: {
            //location: "101270101",
            location:this.location,
            key: KEY,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.hourly = res.data.hourly
          //console.log(this.hourly)
          //遍历hourly这个数组，分别从这个数组取出fxTime和temp
          //初始化事件和温度两个数组
          this.hourWeatherData.fxTime = []
          this.hourWeatherData.temp = []
          this.updateTime = dayjs(res.data.updateTime).format("YYYY-MM-DD HH:mm:ss")
          //遍历24小时天气数据分别取出数据中的部分数据
          this.hourly.forEach(element => {
            this.hourWeatherData.fxTime.push(element.fxTime)
            this.hourWeatherData.temp.push(element.temp)
          });
          // //需要处理fxTime这个数组，把数组中的每个值都通过格式化，只显示HH:mm
          let fxTimeHH = []
          // //1、这是传统方法
           this.hourWeatherData.fxTime.forEach(element => {
             fxTimeHH.push(dayjs(element).format("HH:mm"))
           });
          // console.log("-------------"+fxTimeHH)
          // //调用初始化图表方法
           this.initChart(fxTimeHH,this.hourWeatherData.temp)

          //3、最简便的写法，直接在函数参数中对fxTime数组调用map方法进行元素处理，把map方法的返回值作为函数的参数.......
          // this.initChart(
          //   this.hourWeatherData.fxTime.map((element) => 
          //   dayjs(element).format("HH")
          //   ),
          //   this.hourWeatherData.temp
          // );
        });
    },
    //初始化表格，有两个参数： x坐标的内容和图表值（y坐标）
    initChart(xAxisData, seriesData) {
    //此种方式是通过js的dom获取网页元素，但是在VUE中不能这么使用
    //var chartDom = document.getElementById('main');
    //这是vue中获取网页元素的方式：ref
    var chartDom = this.$refs.chartContainer;
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '未来24小时气温预报'
      },
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: seriesData,
          type: 'line'
        }
      ]
    };
    option && myChart.setOption(option);
    },
  },
  mounted() {
    this.getData();
  },
  watch:{
    location:function(){
      //监听到location属性有变化时，重新调用getData（）网络请求
      this.getData();
    }
  }
};
</script>

<style scoped>
.chart-container{
  height: 20rem;
}
</style>
